<template>
  <div id="roleManage">
    <!-- Dialog 弹出框 -->
    <el-dialog
      :title="
        dialogConfig.openType === 'add'
          ? dialogConfig.addName
          : dialogConfig.editName
      "
      :close-on-click-modal="false"
      :visible.sync="dialogConfig.isShowDialogVisible"
      width="50%"
    >
      <CommonForm
        :form="dialogForm"
        :formLabel="dialogFormLabel"
        :formConfig="dialogFormLConfig">
      </CommonForm>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDialogFormData(dialogForm)">确 定</el-button>
        <el-button @click="dialogConfig.isShowDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <CommonManageMain>
      <template v-slot:header class="header">
        <h3>角色管理</h3>
        <div class="topform">
          <CommonForm
              :form="searchForm"
              :formLabel="searchFormLabel"
              :formConfig="searchFormLConfig">
              <el-form-item>
                  <el-button
                    type="primary"
                    size="small"
                    plain
                    @click="clickToSearch(searchForm)">检 索</el-button>
                  <el-button
                    type="warning"
                    size="small"
                    plain
                    @click="clickToAddRole()">添 加 角 色</el-button>
              </el-form-item>
          </CommonForm>
        </div>
      </template>
      <template v-slot:content class="content">
        <CommonTable
            :tableData="tableData"
            :tableLabel="tableLabel"
            :tableConfig="tableConfig">
             <template v-slot:operation>
                <el-table-column prop="operation" label="操作">
                  <template slot-scope="scope">
                    <el-tooltip
                        :enterable="false"
                        class="item"
                        effect="dark"
                        content="编辑"
                        placement="top">
                      <el-button
                          type="primary"
                          size="mini"
                          @click="clickEditData(scope.row)"
                          >编辑</el-button>
                    </el-tooltip>
                    <el-tooltip
                        :enterable="false"
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="top">
                      <el-button
                          type="danger"
                          size="mini"
                          @click="clickDeleteData(scope.row)"
                          >删除</el-button>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </template>
        </CommonTable>
      </template>
    </CommonManageMain>
  </div>
</template>

<script>
import CommonManageMain from "components/common/CommonManageMain.vue";
import CommonTable from "components/common/CommonTable.vue";
import CommonForm from "components/common/CommonForm.vue";
import { getRoleList, getRoleInfo, addRole, updateRole } from "api/systemManage/roleManage.js"
export default {
  name: 'roleManage',
  components:{
    CommonManageMain,
    CommonTable,
    CommonForm
  },
  data() {
    return{
      // ...........searchDiv 检索部分...........
      // 检索部分 表单数据
      searchForm: {
        roleName: ""
      },
      // 检索部分 表单
      searchFormLabel: [
        {
          model: "roleName",
          label: "角色名称"
        }
      ],
      // 检索部分 表单自定义属性
      searchFormLConfig: {
        labelWidth: "70px",
        inline: true,
        labelPosition: "left"
      },
      // ...........表格...........
      // 表格 数据
      tableData: [],
      // 表格 列表
      tableLabel: [
        {
          prop: "roleName",
          label: "角色名称"
        },
        {
          prop: "description",
          label: "角色描述"
        }
      ],
      // 表格 自定义配置
      tableConfig: {
        // 是否显示分页
        isShowLoading: false,
        // 加载状态
        loading: false,
        // 显示 选择多行数据
        selection: false,
        rowKey: "campusId"
      },
            // ...........Dialog...........
      // Dialog 表单数据
      dialogForm: {
        authorityList: this.$store.state.aside.menu,
        description: "",
        roleId: "",
        roleName: ""
      },
      // Dialog 表单字段
      dialogFormLabel: [
        {
          model: "roleName",
          label: "角色名称",
          width: "80%"
        },
        {
          model: "description",
          label: "角色描述",
          width: "80%",
          type: "textarea",
          rows: 5
        },
        {
          model: "authorityList",
          label: "权限",
          width: "80%",
          type: "tree",
          prop: {}
        }
      ],
      // Dialog 表单自定义属性
      dialogFormLConfig: {
        labelWidth: "100px",
        inline: false,
        labelPosition: "right"
      },
      // Dialog 自定义属性
      dialogConfig: {
        openType: "add",
        addName: "添加",
        editName: "编辑",
        isShowDialogVisible: false
      },
    }
  },
  beforeMount() {
    this.getTableList()
  },
  methods: {
    // 搜索角色名
    clickToSearch(data) {
      if(!data.roleName){
        this.$message({
          message: '请输入需要搜索的角色名',
          type: 'warning'
        })
        return
      }
      this.getTableList(data)

    },
    // 添加角色数据
    clickToAddRole() {
      this.dialogConfig.isShowDialogVisible = true
      this.dialogConfig.openType = 'add'
    },
    // 删除角色数据
    clickDeleteData(row) {
      const roleId = row.roleId
    },
    // 编辑角色数据
    clickEditData(row) {
      const roleId = row.roleId
      getRoleInfo(roleId).then( res => {
        const resData = res.data
        if(resData.code == 200 ) {
          this.dialogForm = {
            description: resData.data.description,
            roleId: resData.data.roleId,
            roleName: resData.data.roleName
          }
        }
      }).catch(err=>{
        console.log(err);
      })
      this.dialogConfig.isShowDialogVisible = true
      this.dialogConfig.openType = 'edit'
    },
    // 提交 Dialog表单数据
    submitDialogFormData(data) {
      // add: 新增  、 edit: 编辑
      const type = this.dialogConfig.openType
      if(type == 'add') {
        //添加
        addRole(data).then(res =>{
          const resData = res.data;
          if (res.data.code == 200){
            this.getTableList();
            this.$message({
              type:'success',
              message:resData.message
            })
          }else {
            this.$message({
              type:'error',
              message:resData.message
            })
          }
        })
      }else if(type == 'edit') {
        //编辑
      }
    },
    // 获取表格数据
    getTableList(roleName) {
      getRoleList(roleName).then( res => {
        const resData = res.data
        if(resData.code == 200 ){
          this.tableData = resData.data
          const dataList = this.tableData.length
          this.$message({
            message: dataList == 0 ? '没有符合的角色名' : '成功搜索到 ' + dataList + " 条数据",
            type: 'success'
          })
        }
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#roleManage{
  height: 100%;
}
</style>
